<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="订单编号" prop="orderNo">
        <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="售后单号" prop="serviceNo">
        <el-input v-model="queryParams.serviceNo" placeholder="请输入售后单号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="申请时间" prop="applyTime">
        <el-date-picker clearable v-model="queryParams.applyTime" type="date" value-format="YYYY-MM-DD"
          placeholder="请选择申请时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="商家名称" prop="sellerName">
        <el-input v-model="queryParams.sellerName" placeholder="请输入商家名称" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="会员名称" prop="buyerName">
        <el-input v-model="queryParams.buyerName" placeholder="请输入会员名称" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="售后类型" prop="afterSalesType" style="width: 300px;">
        <el-select v-model="queryParams.afterSalesType" placeholder="请选择售后类型">
          <el-option label="退货" value="1" />
          <el-option label="退款" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <!-- 有一个标签页，内容：全部，申请售后，通过售后，拒绝售后，待收货，确认收货，完成售后，卖家终止售后，买家取消售后 -->
    <!-- 默认选择全部，点击标签页，查询条件为标签页的值 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="全部" name="all" />
      <el-tab-pane label="申请中" name="1" />
      <el-tab-pane label="通过售后" name="2" />
      <el-tab-pane label="拒绝售后" name="3" />
      <el-tab-pane label="待收货" name="4" />
      <el-tab-pane label="确认收货" name="5" />
      <el-tab-pane label="完成售后" name="6" />
      <el-tab-pane label="卖家终止售后" name="7" />
      <el-tab-pane label="买家取消售后" name="8" />
    </el-tabs>
    <el-table v-loading="loading" :data="serviceList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="售后服务单号" align="center" prop="serviceNo" />
      <el-table-column label="订单编号" align="center" prop="orderNo" />
      <el-table-column label="商品" align="center">
        <!-- 商品=商品图片+商品名称 -->
        <template #default="scope">
          <div>
            <image-preview :src="scope.row.productImage" :width="50" :height="50" />
            <span>{{ scope.row.productName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="会员名称" align="center" prop="buyerName" />
      <el-table-column label="商家名称" align="center" prop="sellerName" />
      <el-table-column label="售后类型" align="center" prop="afterSalesType">
        <template #default="scope">
          <el-tag :type="getAfterSalesTypeTagType(scope.row.afterSalesType)">
            {{ getAfterSalesTypeText(scope.row.afterSalesType) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="售后状态" align="center" prop="afterSalesStatus">
        <template #default="scope">
          <el-tag :type="getAfterSalesStatusTagType(scope.row.afterSalesStatus)">
            {{ getAfterSalesStatusText(scope.row.afterSalesStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="售后金额" align="center" prop="applyAmount" />
      <el-table-column label="申请时间" align="center" prop="applyTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.applyTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="View" @click="handleView(scope.row)"
            v-hasPermi="['orders:service:query']">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script setup name="Service">
import { listService, delService } from "@/api/orders/service.js"

const { proxy } = getCurrentInstance()

const serviceList = ref([])
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const activeTab = ref('all')

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    serviceNo: null,
    orderNo: null,
    shopId: null,
    buyerId: null,
    buyerName: null,
    productId: null,
    productImage: null,
    productQuantity: null,
    returnQuantity: null,
    afterSalesType: null,
    afterSalesStatus: null,
    returnStatus: null,
    reason: null,
    description: null,
    applyAmount: null,
    actualAmount: null,
    refundTime: null,
    refundMethod: null,
    bankName: null,
    bankAccountName: null,
    bankCardNumber: null,
    sellerName: null,
    isApproved: null,
    sellerRemark: null,
    buyerRemark: null,
    evidence: null,
    applyTime: null,
  }
})

const { queryParams } = toRefs(data)

/** 查询售后详情列表 */
function getList() {
  loading.value = true
  listService(queryParams.value).then(response => {
    serviceList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}



/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  activeTab.value = 'all'
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  activeTab.value = 'all'
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}



/** 查看按钮操作 */
function handleView(row) {
  const _id = row.id || ids.value
  proxy.$router.push({
    path: '/orders/service/detail',
    query: { id: _id }
  })
}

/** 售后类型文本 */
function getAfterSalesTypeText(type) {
  const typeMap = {
    '1': '退货',
    '2': '退款'
  }
  return typeMap[type] || type || '未知'
}

/** 售后类型标签类型 */
function getAfterSalesTypeTagType(type) {
  const typeMap = {
    '1': 'danger',  // 退货 - 红色
    '2': 'primary'  // 退款 - 蓝色
  }
  return typeMap[type] || ''
}

/** 售后状态文本 */
function getAfterSalesStatusText(status) {
  const statusMap = {
    '1': '申请中',
    '2': '通过售后',
    '3': '拒绝售后',
    '4': '待收货',
    '5': '确认收货',
    '6': '完成售后',
    '7': '卖家终止售后',
    '8': '买家取消售后'
  }
  return statusMap[status] || status || '未知'
}

/** 售后状态标签类型 */
function getAfterSalesStatusTagType(status) {
  const statusMap = {
    '1': 'primary',    //申请中 - 蓝色
    '2': 'info',       //通过售后 - 青色
    '3': 'danger',     //拒绝售后 - 红色
    '4': 'warning',    //待收货 - 橙色
    '5': '',           //确认收货 - 白色
    '6': 'success',    //完成售后 - 绿色
    '7': 'danger',     //卖家终止售后 - 红色
    '8': 'danger'      //买家取消售后 - 红色
  }
  return statusMap[status] || ''
}

/** 标签页点击处理 */
function handleTabClick(tab) {
  // 重置其他搜索条件，只保留状态筛选
  queryParams.value.serviceNo = null
  queryParams.value.orderNo = null
  queryParams.value.applyTime = null
  queryParams.value.sellerName = null
  queryParams.value.buyerName = null
  queryParams.value.afterSalesType = null

  if (tab.props.name === 'all') {
    queryParams.value.afterSalesStatus = null
  } else {
    queryParams.value.afterSalesStatus = tab.props.name
  }
  queryParams.value.pageNum = 1
  getList()
}



getList()
</script>
